<template>

  <!-- 弹出对话框进行修改用户信息 -->
  <el-dialog v-model="dialogTableVisible" title="修改权限信息">
    <el-form :model="permission" label-width="120px">
      <el-form-item label="权限 ID">
        <el-input v-model="permission.permissionId"></el-input>
      </el-form-item>
      <el-form-item label="权限名称">
        <el-input v-model="permission.name"></el-input>
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="permission.describeInfo"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">修改</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <!-- 批量操作按钮 -->
  <el-button type="primary" @click="addUser">新增权限</el-button>
  <el-button type="danger" @click="batchDelete">批量删除</el-button>

  <el-table
      :data="permissionList"
      style="width: 100%"
      @select="select">
    <el-table-column type="selection" width="55"/>
    <el-table-column label="权限 id" prop="permissionId"/>
    <el-table-column label="权限名称" prop="name"/>
    <el-table-column label="权限描述" prop="describeInfo"/>
    <el-table-column align="right">
      <template #header>
        <el-input :change="searchUser" v-model="search" size="mini" placeholder="Type to search"/>
      </template>
      <template #default="scope">
        <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">
          编辑
        </el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">
          删除
        </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import {onBeforeMount, reactive, Ref, ref} from "vue";

import {DELETE, GETA, POST, PUT} from "@/api";
import {ElMessage, ElMessageBox} from "element-plus";

import Page from "@/components/page/Page.vue"

export default {
  name: "Permission",
  components: {
    Page,
  },
  setup() {
    const dialogTableVisible = ref(false)
    const permissionList = ref()
    const permission = ref<any>({})
    const selectList = ref<any>([])

    const search = ref("")
    const handleEdit = (index: any, row: any) => {
      dialogTableVisible.value = true
      permission.value = row
    }

    const handleDelete = (index: any, row: any) => {
      ElMessageBox.confirm(
          '确定要删除' + row.username + '角色吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        DELETE(`/permission/delete/${row.permissionId}`).then(res => {
          if (res.status === 200) {
            ElMessage.success("删除权限" + row.name + "成功")
            loadPermission()
          }
        }).catch(err => {
          console.log(err)
          ElMessage.error("出错啦")
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }

    const searchUser = () => {
      // TODO 搜索用户
      console.log("更改用户")
    }


    const loadPermission = () => {
      GETA(`/User/GetAllUser`, {}).then(res => {
        if (res.status === 200) {
          permissionList.value = res.data
        }
      }).catch(err => {
        console.log(err)
      })
    }

    onBeforeMount(() => {
      loadPermission()
    })

    const onSubmit = () => {
      console.log(permission)
      // TODO 用户封装传来数据失败
      POST("/permission/add", {
        ...permission.value
      }, {}).then(res => {
        ElMessage.success("操作成功")
        permissionList.value.push(permission.value)
        dialogTableVisible.value = false
      }).catch(err => {
        ElMessage.error("操作失败")
      })
    }

    const onCancel = () => {
      dialogTableVisible.value = false
    }

    const batchDelete = () => {
      ElMessageBox.confirm(
          '确定要删除吗?',
          'Warning',
          {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
          }
      ).then(() => {
        let idList: any[] = []
        selectList.value.forEach((item: any) => idList.push(item.permissionId))
        POST("/permission/batchDelete", [...idList]).then(res => {
          ElMessage.success("删除权限成功")
          loadPermission()
        }).catch(err => {
          ElMessage.error("网络异常")
        })
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消操作',
        })
      })
    }

    const select = (selections: any, row: any) => {
      console.log(selections, row)
      selectList.value = selections
    }

    const addUser = () => {
      permission.value = {}
      dialogTableVisible.value = true
    }

    return {
      search,
      handleDelete,
      handleEdit,
      searchUser,
      dialogTableVisible,
      onSubmit,
      onCancel,
      batchDelete,
      addUser,
      permissionList,
      permission,
      select
    }
  }
}
</script>
